<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>5+记账APP</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  
  <!-- Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3B82F6', // 淡蓝色主色调
            secondary: '#64748B', // 灰色辅助色
            success: '#10B981', // 成功色
            warning: '#F59E0B', // 警告色
            danger: '#EF4444', // 危险色
            neutral: {
              100: '#F3F4F6',
              200: '#E5E7EB',
              300: '#D1D5DB',
              400: '#9CA3AF',
              500: '#6B7280',
              600: '#4B5563',
              700: '#374151',
              800: '#1F2937',
              900: '#111827',
            }
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
          boxShadow: {
            'card': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
            'card-hover': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
          }
        },
      }
    }
  </script>
  
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .transition-custom {
        transition: all 0.3s ease;
      }
      .btn-hover {
        @apply hover:shadow-lg hover:-translate-y-0.5 transition-all duration-200;
      }
      .card-hover {
        @apply hover:shadow-card-hover transition-all duration-300;
      }
      .input-focus {
        @apply focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200;
      }
    }
  </style>
  
  <style>
    /* 全局样式 */
    body {
      font-family: 'Inter', system-ui, sans-serif;
      background-color: #F9FAFB;
    }
    
    /* 动画效果 */
    .fade-in {
      animation: fadeIn 0.3s ease-in-out;
    }
    
    .slide-in {
      animation: slideIn 0.3s ease-out;
    }
    
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    @keyframes slideIn {
      from { transform: translateY(20px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }
    
    /* 滚动条样式 */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    
    ::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 3px;
    }
    
    ::-webkit-scrollbar-thumb {
      background: #c1c1c1;
      border-radius: 3px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
      background: #a1a1a1;
    }
  </style>
</head>

<body class="min-h-screen bg-neutral-100 text-neutral-800">
  <!-- 主容器 -->
  <div id="app" class="min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300">
      <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <div class="flex items-center space-x-2">
          <i class="fa-solid fa-calculator text-primary text-2xl"></i>
          <h1 class="text-xl font-bold text-primary">5+记账</h1>
        </div>
        
        <!-- 桌面端导航 -->
        <nav class="hidden md:flex items-center space-x-6">
          <a href="#home" class="nav-link text-primary font-medium">首页</a>
          <a href="#expense" class="nav-link text-neutral-600 hover:text-primary transition-colors">费用管理</a>
          <a href="#trip" class="nav-link text-neutral-600 hover:text-primary transition-colors">行程管理</a>
          <a href="#statistics" class="nav-link text-neutral-600 hover:text-primary transition-colors">统计</a>
          <a href="#settings" class="nav-link text-neutral-600 hover:text-primary transition-colors">设置</a>
        </nav>
        
        <!-- 移动端菜单按钮 -->
        <button id="menu-toggle" class="md:hidden text-neutral-700 hover:text-primary">
          <i class="fa-solid fa-bars text-xl"></i>
        </button>
      </div>
      
      <!-- 移动端导航菜单 -->
      <div id="mobile-menu" class="md:hidden hidden bg-white border-t border-neutral-200">
        <div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
          <a href="#home" class="mobile-nav-link py-2 px-4 text-primary font-medium rounded-lg bg-primary/10">首页</a>
          <a href="#expense" class="mobile-nav-link py-2 px-4 text-neutral-600 hover:bg-primary/10 hover:text-primary rounded-lg transition-colors">费用管理</a>
          <a href="#trip" class="mobile-nav-link py-2 px-4 text-neutral-600 hover:bg-primary/10 hover:text-primary rounded-lg transition-colors">行程管理</a>
          <a href="#statistics" class="mobile-nav-link py-2 px-4 text-neutral-600 hover:bg-primary/10 hover:text-primary rounded-lg transition-colors">统计</a>
          <a href="#settings" class="mobile-nav-link py-2 px-4 text-neutral-600 hover:bg-primary/10 hover:text-primary rounded-lg transition-colors">设置</a>
        </div>
      </div>
    </header>

    <!-- 主内容区域 -->
    <main class="flex-grow container mx-auto px-4 py-6">
      <!-- 首页 -->
      <section id="home" class="fade-in">
        <div class="mb-8">
          <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-neutral-800 mb-4">欢迎使用 5+记账</h2>
          <p class="text-neutral-600">高效管理您的行程和费用</p>
        </div>
        
        <!-- 快捷操作按钮 -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
          <button id="new-trip-btn" class="bg-white rounded-xl shadow-card p-6 card-hover flex items-center space-x-4">
            <div class="bg-primary/10 p-3 rounded-lg">
              <i class="fa-solid fa-plane-departure text-primary text-xl"></i>
            </div>
            <div>
              <h3 class="font-bold text-lg">新建行程</h3>
              <p class="text-neutral-500 text-sm">创建新的出差或旅行计划</p>
            </div>
          </button>
          
          <button id="add-expense-btn" class="bg-white rounded-xl shadow-card p-6 card-hover flex items-center space-x-4">
            <div class="bg-primary/10 p-3 rounded-lg">
              <i class="fa-solid fa-receipt text-primary text-xl"></i>
            </div>
            <div>
              <h3 class="font-bold text-lg">添加费用</h3>
              <p class="text-neutral-500 text-sm">记录行程相关的费用支出</p>
            </div>
          </button>
          
          <button id="submit-reimbursement-btn" class="bg-white rounded-xl shadow-card p-6 card-hover flex items-center space-x-4">
            <div class="bg-primary/10 p-3 rounded-lg">
              <i class="fa-solid fa-credit-card text-primary text-xl"></i>
            </div>
            <div>
              <h3 class="font-bold text-lg">费用报销</h3>
              <p class="text-neutral-500 text-sm">提交报销申请流程</p>
            </div>
          </button>
        </div>
        
        <!-- 最近行程和报销记录 -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <!-- 最近行程 -->
          <div class="bg-white rounded-xl shadow-card p-6">
            <div class="flex justify-between items-center mb-4">
              <h3 class="font-bold text-lg">最近行程</h3>
              <a href="#trip" class="text-primary text-sm hover:underline">查看全部</a>
            </div>
            
            <div class="overflow-x-auto">
              <table class="min-w-full">
                <thead>
                  <tr class="text-left text-neutral-500 text-sm border-b">
                    <th class="pb-3 font-medium">目的地</th>
                    <th class="pb-3 font-medium">开始日期</th>
                    <th class="pb-3 font-medium">结束日期</th>
                    <th class="pb-3 font-medium">状态</th>
                  </tr>
                </thead>
                <tbody id="recent-trips-table">
                  <!-- 动态生成内容 -->
                </tbody>
              </table>
            </div>
          </div>
          
          <!-- 最近报销记录 -->
          <div class="bg-white rounded-xl shadow-card p-6">
            <div class="flex justify-between items-center mb-4">
              <h3 class="font-bold text-lg">最近报销</h3>
              <a href="#expense" class="text-primary text-sm hover:underline">查看全部</a>
            </div>
            
            <div class="overflow-x-auto">
              <table class="min-w-full">
                <thead>
                  <tr class="text-left text-neutral-500 text-sm border-b">
                    <th class="pb-3 font-medium">行程</th>
                    <th class="pb-3 font-medium">报销金额</th>
                    <th class="pb-3 font-medium">提交日期</th>
                    <th class="pb-3 font-medium">状态</th>
                  </tr>
                </thead>
                <tbody id="recent-reimbursements-table">
                  <!-- 动态生成内容 -->
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </section>
      
      <!-- 新建行程页面 -->
      <section id="new-trip" class="hidden fade-in">
        <div class="mb-6">
          <h2 class="text-2xl font-bold text-neutral-800 mb-2">新建行程</h2>
          <p class="text-neutral-600">填写以下信息创建新的行程</p>
        </div>
        
        <div class="bg-white rounded-xl shadow-card p-6 max-w-2xl mx-auto">
          <form id="new-trip-form">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
              <div>
                <label for="destination" class="block text-sm font-medium text-neutral-700 mb-1">目的地 <span class="text-danger">*</span></label>
                <input type="text" id="destination" name="destination" required
                  class="w-full px-4 py-2 border border-neutral-300 rounded-lg input-focus"
                  placeholder="请输入目的地">
              </div>
              
              <div>
                <label for="purpose" class="block text-sm font-medium text-neutral-700 mb-1">出差目的 <span class="text-danger">*</span></label>
                <input type="text" id="purpose" name="purpose" required
                  class="w-full px-4 py-2 border border-neutral-300 rounded-lg input-focus"
                  placeholder="请输入出差目的">
              </div>
              
              <div>
                <label for="start-date" class="block text-sm font-medium text-neutral-700 mb-1">开始日期 <span class="text-danger">*</span></label>
                <input type="date" id="start-date" name="start-date" required
                  class="w-full px-4 py-2 border border-neutral-300 rounded-lg input-focus">
              </div>
              
              <div>
                <label for="end-date" class="block text-sm font-medium text-neutral-700 mb-1">结束日期 <span class="text-danger">*</span></label>
                <input type="date" id="end-date" name="end-date" required
                  class="w-full px-4 py-2 border border-neutral-300 rounded-lg input-focus">
              </div>
            </div>
            
            <div class="flex justify-end space-x-3 mt-6">
              <button type="button" id="cancel-new-trip" class="px-6 py-2 border border-neutral-300 rounded-lg text-neutral-700 hover:bg-neutral-50 transition-colors">取消</button>
              <button type="submit" class="px-6 py-2 bg-primary text-white rounded-lg btn-hover">提交</button>
            </div>
          </form>
        </div>
      </section>
      
      <!-- 添加费用页面 -->
      <section id="add-expense" class="hidden fade-in">
        <div class="mb-6">
          <h2 class="text-2xl font-bold text-neutral-800 mb-2">添加费用</h2>
          <p class="text-neutral-600">填写以下信息添加费用记录</p>
        </div>
        
        <div class="bg-white rounded-xl shadow-card p-6 max-w-2xl mx-auto">
          <form id="add-expense-form">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
              <div>
                <label for="expense-trip" class="block text-sm font-medium text-neutral-700 mb-1">关联行程 <span class="text-danger">*</span></label>
                <select id="expense-trip" name="expense-trip" required
                  class="w-full px-4 py-2 border border-neutral-300 rounded-lg input-focus">
                  <option value="">请选择行程</option>
                  <!-- 动态生成选项 -->
                </select>
              </div>
              
              <div>
                <label for="expense-type" class="block text-sm font-medium text-neutral-700 mb-1">费用类型 <span class="text-danger">*</span></label>
                <select id="expense-type" name="expense-type" required
                  class="w-full px-4 py-2 border border-neutral-300 rounded-lg input-focus">
                  <option value="">请选择费用类型</option>
                  <option value="transportation">交通</option>
                  <option value="accommodation">住宿</option>
                  <option value="meal">餐饮</option>
                  <option value="entertainment">招待</option>
                  <option value="other">其他</option>
                </select>
              </div>
              
              <div>
                <label for="expense-amount" class="block text-sm font-medium text-neutral-700 mb-1">金额 (¥) <span class="text-danger">*</span></label>
                <input type="number" id="expense-amount" name="expense-amount" step="0.01" min="0.01" required
                  class="w-full px-4 py-2 border border-neutral-300 rounded-lg input-focus"
                  placeholder="请输入金额">
              </div>
              
              <div>
                <label for="expense-date" class="block text-sm font-medium text-neutral-700 mb-1">日期 <span class="text-danger">*</span></label>
                <input type="date" id="expense-date" name="expense-date" required
                  class="w-full px-4 py-2 border border-neutral-300 rounded-lg input-focus">
              </div>
            </div>
            
            <div class="mb-6">
              <label for="expense-description" class="block text-sm font-medium text-neutral-700 mb-1">描述</label>
              <textarea id="expense-description" name="expense-description" rows="3"
                class="w-full px-4 py-2 border border-neutral-300 rounded-lg input-focus"
                placeholder="请输入费用描述（可选）"></textarea>
            </div>
            
            <div class="flex justify-end space-x-3 mt-6">
              <button type="button" id="cancel-add-expense" class="px-6 py-2 border border-neutral-300 rounded-lg text-neutral-700 hover:bg-neutral-50 transition-colors">取消</button>
              <button type="submit" class="px-6 py-2 bg-primary text-white rounded-lg btn-hover">提交</button>
            </div>
          </form>
        </div>
      </section>
      
      <!-- 提交报销页面 -->
      <section id="submit-reimbursement" class="hidden fade-in">
        <div class="mb-6">
          <h2 class="text-2xl font-bold text-neutral-800 mb-2">费用报销</h2>
          <p class="text-neutral-600">选择行程并提交报销申请</p>
        </div>
        
        <div class="bg-white rounded-xl shadow-card p-6 max-w-4xl mx-auto">
          <form id="submit-reimbursement-form">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
              <div>
                <label for="reimbursement-trip" class="block text-sm font-medium text-neutral-700 mb-1">选择行程 <span class="text-danger">*</span></label>
                <select id="reimbursement-trip" name="reimbursement-trip" required
                  class="w-full px-4 py-2 border border-neutral-300 rounded-lg input-focus">
                  <option value="">请选择行程</option>
                  <!-- 动态生成选项 -->
                </select>
              </div>
              
              <div>
                <label for="city-allowance" class="block text-sm font-medium text-neutral-700 mb-1">市内补贴标准</label>
                <input type="text" id="city-allowance" name="city-allowance" value="80元/天" readonly
                  class="w-full px-4 py-2 bg-neutral-100 border border-neutral-300 rounded-lg text-neutral-600">
              </div>
              
              <div>
                <label for="meal-allowance" class="block text-sm font-medium text-neutral-700 mb-1">餐饮补贴标准</label>
                <input type="text" id="meal-allowance" name="meal-allowance" value="100元/天" readonly
                  class="w-full px-4 py-2 bg-neutral-100 border border-neutral-300 rounded-lg text-neutral-600">
              </div>
            </div>
            
            <div class="mb-6">
              <h3 class="font-bold text-lg mb-3">费用明细</h3>
              <div class="overflow-x-auto">
                <table class="min-w-full">
                  <thead>
                    <tr class="text-left text-neutral-500 text-sm bg-neutral-50">
                      <th class="py-2 px-4 font-medium">费用类型</th>
                      <th class="py-2 px-4 font-medium">日期</th>
                      <th class="py-2 px-4 font-medium">金额 (¥)</th>
                      <th class="py-2 px-4 font-medium">描述</th>
                    </tr>
                  </thead>
                  <tbody id="reimbursement-expenses-table">
                    <!-- 动态生成内容 -->
                  </tbody>
                </table>
              </div>
            </div>
            
            <div class="flex justify-end items-center space-x-6 mt-6">
              <div class="text-right">
                <div class="text-sm text-neutral-600 mb-1">报销总额</div>
                <div class="text-xl font-bold text-primary">¥0.00</div>
              </div>
              
              <div>
                <button type="button" id="cancel-submit-reimbursement" class="px-6 py-2 border border-neutral-300 rounded-lg text-neutral-700 hover:bg-neutral-50 transition-colors">取消</button>
                <button type="submit" class="px-6 py-2 bg-primary text-white rounded-lg btn-hover ml-3">提交报销</button>
              </div>
            </div>
          </form>
        </div>
      </section>
      
      <!-- 费用管理页面 -->
    </main>
  </div>
</body>
</html>